<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>登录</title>
    <link rel="stylesheet" href="css/login.css" />
    <link rel="stylesheet" th:href="@{/static/css/login.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/layui/css/layui.css}" media="all">
    <style type="text/css">
        body{
            background-image: url(static/img/bg2.jpg);
            }

    </style>
</head>

<body>
<div class="top">师大小助手</div>
<div class="content">
    <div class="login">
        <div class="title">账号登录</div>
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">请输入账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">请输入密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-block">
                        <input type="text" name="vercode" lay-verify="required" placeholder="输入下方验证码" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <img src="captcha.jpg" id="LAY-user-get-vercode">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="login">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/static/plugins/jquery-2.2.4/jquery.min.js}"></script>
<script th:src="@{/static/plugins/layui/layui.all.js}"></script>
<script>
    $(function () {
        $("#LAY-user-get-vercode").click(function () {
            $("#LAY-user-get-vercode").attr({src: "captcha.jpg?" + Math.random()});
        });
    });
    layui.use(['form'], function(){
        var form = layui.form
            ,layer = layui.layer;
        //监听提交
        form.on('submit(login)', function(data){
            var data = "username=" + data.field.username + "&password=" + data.field.password + "&captcha=" + data.field.vercode;
            var loading = layer.load(1);//开启进度条
            $.ajax({
                url:"/sys/login?"+data,
                type:"post",
                contentType: "json",
                async: false,
                success: function (obj) {
                    layer.close(loading);//关闭
                    if (obj.code==0) {
                        layer.msg(obj.msg, {
                            icon: 1,
                            shade: 0.3,
                            time: 2000
                        }, function () {
                            window.location.href = 'index.html';
                            //疯狂模式，关闭所有层
                            parent.layer.closeAll();
                        });
                    } else {
                        $("#LAY-user-get-vercode").click();
                        layer.msg(obj.msg, {
                            icon: 2,
                            shade: 0.3,
                            time: 1000
                        });
                    }
                }

            })
            return false;
        });
    });
</script>
</body>
</html>